<p>Default button styles</p>
<p>
    <button bs-button>Button</button>
    <button bs-button="size-small">Button Small</button>
    <button bs-button="size-small" disabled>Button Small</button>
</p>
<p>Subtle button styles</p>
<p>
    <button bs-button="subtle">Button</button>
    <button bs-button="size-small subtle">Button Small</button>
    <button bs-button="size-small subtle" disabled>Button Small</button>
</p>
<p>Alternative Subtle button styles</p>
<p>
    <button bs-button="subtle-alt">Button</button>
    <button bs-button="size-small subtle-alt">Button Small</button>
    <button bs-button="size-small subtle-alt" disabled>Button Small</button>
</p>
<hr/>
<p>Default buttons with icons</p>
<div>
    <button bs-button="icon-left">{{ inc src="icon.hbs" icon="square-add" }} Icon Left</button>
    <button bs-button="icon-right">{{ inc src="icon.hbs" icon="globe" }} Icon Right</button>
    <button bs-button="icon">{{ inc src="icon.hbs" icon="target" }}</button>
    <button bs-button="icon" disabled>{{ inc src="icon.hbs" icon="target" }}</button>
</div>
<div>
    <button bs-button="size-small icon-left">{{ inc src="icon.hbs" icon="square-add" }} Icon Left</button>
    <button bs-button="size-small icon-right">{{ inc src="icon.hbs" icon="bug" }} Icon Right</button>
    <button bs-button="size-small icon">{{ inc src="icon.hbs" icon="target" }}</button>
    <button bs-button="size-small icon" disabled>{{ inc src="icon.hbs" icon="target" }}</button>
</div>
<br/>
<p>Subtle buttons with icons</p>
<div>
    <button bs-button="subtle icon-left">{{ inc src="icon.hbs" icon="square-add" }} Icon Left</button>
    <button bs-button="subtle icon-right">{{ inc src="icon.hbs" icon="bug" }} Icon Right</button>
    <button bs-button="subtle icon">{{ inc src="icon.hbs" icon="target" }}</button>
    <button bs-button="subtle icon" disabled>{{ inc src="icon.hbs" icon="help" }}</button>
</div>
<div>
    <button bs-button="size-small subtle icon-left">{{ inc src="icon.hbs" icon="square-add" }} Icon Left</button>
    <button bs-button="size-small subtle icon-right">{{ inc src="icon.hbs" icon="bug" }} Icon Right</button>
    <button bs-button="size-small subtle icon">{{ inc src="icon.hbs" icon="target" }}</button>
    <button bs-button="size-small subtle icon" disabled>{{ inc src="icon.hbs" icon="help" }}</button>
</div>
<br/>
<p>Alternative Subtle button styles with icons</p>
<div>
    <button bs-button="size-small subtle-alt icon-left">{{ inc src="icon.hbs" icon="globe" }} Icon Left</button>
    <button bs-button="size-small subtle-alt icon-right">{{ inc src="icon.hbs" icon="bug" }} Icon Right</button>
    <button bs-button="size-small subtle-alt icon">{{ inc src="icon.hbs" icon="target" }}</button>
    <button bs-button="size-small subtle-alt icon" disabled>{{ inc src="icon.hbs" icon="help" }}</button>
</div>
